<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父传子</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<tabbar :text="home" :show-home="flag"></tabbar>
			<tabbar :text="detail" :show-home="true"></tabbar>
			<tabbar :text="cart"></tabbar>
		</div>
		<script type="text/javascript">
			Vue.component("tabbar",{
				template:`
					<div style="background:blue;color:wlite;">
						<button v-if="showHome">返回</button>
						<span>导航--{{text}}</span>
						<button>登录</button>
					</div>
				`,
				props:{
					text:{
						type:String,
						default:"默认值"
					},
					showHome:{
						type:Boolean,
						default:true
					}
				}
			})
			const vm = new Vue({
				el:"#app",
				data:{
					home:"首页",
					detail:"详情",
					cart:"购物车",
					flag:false
				}
			})
		</script>
	</body>
</html>
